<template>
  <el-container class="layout-ltb">
    <el-container>
      <el-header height="114">
        <el-form
          ref="queryFormRef"
          :model="queryParams"
          size="small"
          label-position="right"
          class="search-form mt-[20px]"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="搜索">
                <el-input
                  v-model="queryParams.HolidayName"
                  placeholder="请输入节假日名称"
                  maxlength="20"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button
                type="primary"
                class="btn-search"
                @click="f_HandleSearch"
              >
                <i-ep-search class="mr-[2px] text-size-[11px] v-bottom" />搜索
              </el-button>
              <el-button type="warning" class="btn-reset" @click="f_Reset">
                <i-ep-refresh class="mr-[2px] text-size-[11px] v-bottom" />重置
              </el-button>
            </el-col>
          </el-row>
        </el-form>

        <el-row :gutter="20">
          <el-col :span="6" />
        </el-row>
      </el-header>
      <el-main>
        <div>
          <div class="toolbar">
            <el-button type="primary" class="btn-add" @click="f_OpenDialog"
              ><i-ep-plus class="mr-[4px] text-size-[11px]" /> 新增</el-button
            >
          </div>
          <el-table
            v-if="tableData.length"
            :data="tableData"
            border
            :height="tableHeight"
            header-row-class-name="table-header"
            size="small"
          >
            <el-table-column
              type="index"
              width="60"
              label="序号"
              align="center"
            />
            <el-table-column prop="holidayName" label="名称" align="center" />
            <el-table-column prop="name2" label="年份" align="center">
              <template #default="scope">
                {{ moment(scope.row.startDate).format("yyyy") }}
              </template>
            </el-table-column>
            <el-table-column prop="name2" label="日期" align="center">
              <template #default="scope">
                {{ moment(scope.row.startDate).format("yyyy-MM-DD") }} ~
                {{ moment(scope.row.endDate).format("yyyy-MM-DD") }}
              </template>
            </el-table-column>
            <el-table-column prop="name2" label="天数" align="center">
              <template #default="scope">
                {{ f_GetDays(scope.row) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              align="center"
            />n="center" />
            <el-table-column
              label="操作"
              align="center"
              width="140"
              fixed="right"
            >
              <template #default="scope">
                <el-button
                  type="primary"
                  size="small"
                  link
                  @click="f_OpenDialog(scope.row)"
                  ><i-ep-edit
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  link
                  @click="f_Del(scope.row)"
                  ><i-ep-delete
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <noneData :noneShow="!tableData.length" :height="tableHeight" />
          <pagination
            size="small"
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.PageIndex"
            v-model:limit="queryParams.PageSize"
            @pagination="f_HandelQuery"
          />
        </div>
      </el-main>
    </el-container>

    <!-- 弹窗 -->
    <el-drawer
      v-model="dialog.visible"
      :title="dialogTitle"
      size="600"
      append-to-body
      class="bg-[#f5f5f5!important]"
      destroy-on-close
    >
      <edit_drawer :form="form" @close="f_CloseDialog" />
    </el-drawer>
  </el-container>
</template>

<script setup lang="ts">
defineOptions({
  name: "Inspection",
  inheritAttrs: false,
});
import moment from "moment";
import HolidayAPI from "@/api/HolidayAPI";
import edit_drawer from "./edit.vue";
let tableHeight = ref(0);
// 弹窗对象
const dialog = reactive({
  visible: false,
  title: "",
});
const queryFormRef = ref(ElForm);
const loading = ref(false);
const total = ref(0);
const tableData = ref([]);
const dialogTitle = ref("");
const form = reactive({
  id: 0,
  holidayName: "",
  startDate: "",
  endDate: "",
  remark: "",
});
const queryParams = reactive({
  PageIndex: 1,
  PageSize: 10,
  HolidayName: "",
});

// 重置
function f_Reset() {
  queryParams.HolidayName = "";
  queryParams.PageIndex = 1;
}

// 搜索
function f_HandleSearch() {
  queryParams.PageIndex = 1;
  f_HandelQuery();
}

// 查询
function f_HandelQuery() {
  loading.value = true;
  HolidayAPI.api_query(queryParams).then(({ data, succeeded }) => {
    if (succeeded) {
      tableData.value = data.items;
      total.value = data.totalCount;
    }
  });
}

// 删除
function f_Del(data: any) {
  ElMessageBox.confirm("确认删除数据?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      loading.value = true;
      HolidayAPI.api_del(data.id).then(({ data, errors, succeeded }) => {
        if (succeeded) {
          ElMessage.success("删除成功！");
          f_HandelQuery();
        }
        loading.value = false;
      });
    })
    .catch(() => ElMessage.info("已取消删除!"));
}

// 返回间隔多少天
function f_GetDays(data: any) {
  let date1 = new Date(data.startDate);
  let date2 = new Date(data.endDate);
  date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
  date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
  const diff = date1.getTime() - date2.getTime();
  return Math.abs(diff) / (24 * 60 * 60 * 1000) + 1 + "天";
}

// 打开弹窗
function f_OpenDialog(data: any) {
  if (data.id) {
    dialogTitle.value = "节假日管理 - 编辑";
    form.id = data.id;
    form.holidayName = data.holidayName;
    form.startDate = data.startDate;
    form.endDate = data.endDate;
    form.remark = data.remark;
  } else {
    dialogTitle.value = "节假日管理 - 新增";
    form.id = 0;
    form.holidayName = "";
    form.startDate = "";
    form.endDate = "";
    form.remark = "";
  }
  dialog.visible = true;
}

// 关闭弹框
function f_CloseDialog() {
  dialog.visible = false;
  f_HandelQuery();
}

window.onresize = () => {
  return (() => {
    tableHeight.value = window.innerHeight - 330;
  })();
};

onMounted(() => {
  f_HandelQuery();
  tableHeight.value = window.innerHeight - 330;
});
</script>
<style scoped lang="scss">
.mydrawer {
  background: red !important;
}
</style>
